<template>
    <div class="sheet">
        <!-- 查询 -->
        <SearchHead @handleSearch="search" />
        <div class="top-box">
            <div class="top-box_left">
                <!-- 添加报表 -->
                <ReportAdd />
                <!-- 搜索历史 -->
                <div class="search-history_box">
                    <SearchHistory />
                </div>
                <!-- 添加 查询条件 -->
                <div class="search-add_box">
                    <SearchAdd />
                </div>
            </div>
            <div class="top-box_right">
                <SearchConfig />
            </div>
        </div>
        <div class="line"></div>
        <div class="down-box">
            <div class="tag-list">
                <div class="tag tag-act">
                    <div>客流分析报表</div>
                    <img src="@/assets/images/close-report.svg" class="close-tag_icon">
                </div>
            </div>
            <div class="container">
                <template v-for="(item, index) in cardData" :key="index">
                    <DynamicCard :config="item" />
                </template>
            </div>
        </div>
    </div>
</template>

<script setup lang="js">
import SearchHead from './cmps/search-head/search-head.vue';
import ReportAdd from './cmps/report-add/report-add.vue';
import SearchHistory from './cmps/search-history/search-history.vue';
import SearchAdd from './cmps/search-add/search-add.vue';
import SearchConfig from './cmps/search-config/search-config.vue';
import { cardData } from "./config/config"

// 查询
const search = () => {
    console.log('search方法被调用');
}

</script>
<style scoped lang="scss">
.sheet {
    background: linear-gradient(180deg, rgba(24, 56, 68, 0.29) 0%, rgba(0, 0, 0, 0) 100%);
    border-radius: vw(4);
    border: 1px solid #113C4B;
    padding: 0 vw(11);

    .top-box {
        display: flex;
        justify-content: space-between;
        padding: vh(12) vw(38) vh(33) vw(38);

        .top-box_left {
            width: vw(918);
            margin-top: vh(22);

            .search-history_box {
                margin-top: vh(20);
            }

            .search-add_box {
                margin-top: vh(30);
            }
        }

        .top-box_right {
            width: vw(860);
            background: rgba(15, 49, 64, 0.4);
            border-radius: 6px;
            align-self: flex-start;
            padding: vh(20) vw(20);
        }
    }

    .line {
        width: 100%;
        height: vh(1);
        background: rgba(255, 255, 255, 0.37);
    }

    .down-box {
        padding: 0 vw(10);
        margin-top: vh(40);

        .tag-list {
            display: flex;
            align-items: center;

            .tag {
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: vw(7);
                margin-right: vw(12);
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: vw(18);
                color: #FFFFFF;
                padding: vh(6) vw(20);
                cursor: pointer;

                .close-tag_icon {
                    width: vw(22);
                    margin-left: vw(25);
                }
            }

            .tag-act {
                background: #124457;
            }

            .tag-def {
                background: rgba(18, 68, 87, 0.25);
            }
        }

        .container {
            margin-top: vh(30);
        }
    }
}
</style>